<template>
	<view class="home">
		<mall-swiper :imgList="topBannerList"></mall-swiper>
		<mall-menu :menus="menus"></mall-menu>
		<mall-banner :leftImg="leftBanner" :rightImgList="rightBannerList"></mall-banner>
		<view class="banner">
			<image v-for="(img,index) in bottomBanners" class="img" :key="index" :src="img" mode=""></image>
		</view>
		<mall-article-block title="特色推荐" :articles="articleList"></mall-article-block>
	</view>
</template>

<script>
	import mallSwiper from '../../components/mall-swiper/mall-swiper.vue'
	import mallBanner from '../../components/mall-banner/mall-banner.vue'
	import mallMenu from '../../components/mall-menu/mall-menu.vue'
	import mallArticleBlock from '../../components/mall-article-block/mall-article-block.vue'
	import mallHBlock from '../../components/mall-h-block/mall-h-block.vue'
	import mallSearch from '../../components/mall-search/mall-search.vue'
	import mallTopBar from '../../components/mall-top-bar/mall-top-bar.vue'
	import { index } from '@/api/home.js'
	import CONFIG from '@/config/index.js'
	export default {
		data() {
			return {
				banners : [],
				articles: []		
			}
		},
		computed:{
			menus(){
			 let tzts = ''; 
			 let list =	this.articles.filter(article => article.title == '童仔特色')
			 if(list.length>0){
				 tzts =list[0].url;
			 }
			 let mdjs = ''
			 list =	this.articles.filter(article => article.title === '门店介绍')
			 if(list.length>0){
				 mdjs =list[0].url;
			 }
			return	[
				{
					'img':require('../../static/menu/tzts.png'),
					'name':'童仔特色',
					 url:tzts
				},
				{
					'img':require('../../static/menu/mdjs.png'),
					'name':'门店介绍',
					'url':mdjs
				},
				{
					'img':require('../../static/menu/zxdz.png'),
					'name':'在线定座',
					'url':'contact'
				},
				{
					'img':require('../../static/menu/srdz.png'),
					'name':'私人定制',
					'url':'contact'
				},
				{
					'url':'my',
					'img':require('../../static/menu/hy.png'),
					'name':'会员中心'
				},
				]
				},
			articleList(){
			return	this.articles.filter(article => {
					if(article.img){
						article.img = CONFIG.IMG_HEAD + article.img.split(",")[0]
					}
					return article.status == 1
				})
			},
			topBannerList(){
				let list = this.banners.filter(banner => banner.type==0&&banner.site==0)
				if(list&&list.length>0){
					return list[0].img.split(",").map(img => CONFIG.IMG_HEAD + img)
				}
				return []
			},
			leftBanner(){
				let list = this.banners.filter(banner => banner.type==0&&banner.site==1)
				if(list&&list.length>0){
					return CONFIG.IMG_HEAD + list[0].img.split(",")[0]
				}
				return null
			},
			rightBannerList(){
				let list = this.banners.filter(banner => banner.type==0&&banner.site==2)
				if(list&&list.length>0){
					return list[0].img.split(",").map(img => CONFIG.IMG_HEAD + img)
				}
				return []
			},
			bottomBanners(){
				let list = this.banners.filter(banner => banner.type==0&&banner.site==3)
				if(list&&list.length>0){
					return list[0].img.split(",").map(img => CONFIG.IMG_HEAD + img)
				}
				return []
			}
		},
		onShow() {
			if(!this.banners||this.banners.length==0||!this.articles||this.articles.length==0){
				index().then(res => {
					this.banners = res.extra.banners
					this.articles = res.extra.articles
				})
			}
		},
		onLoad() {
			index().then(res => {
				this.banners = res.extra.banners
				this.articles = res.extra.articles
			})
		},
		components:{
			mallSwiper,mallMenu,mallBanner,mallArticleBlock,mallHBlock,mallSearch,mallTopBar
		},
		methods: {

		}
	}
</script>

<style lang="stylus" scoped>
	.home
		background url(../../static/hbg.png) no-repeat
		background-size 100% auto
		background-color #EFEFEF
		.banner
			padding 0 22upx
			.img
				width 100%
				height 250upx
				margin-bottom 30upx
				border-radius 10upx
				box-shadow: 3px 5px 5px #888888;
</style>	
